<template>
	<div class="fillcontain">
		<head-top></head-top>
		<div class="table_container">
			<!-- 条件查询 -->
			<el-row :gutter="20 " class="demo-autocomplete">
				<el-col :span="5">
					<el-autocomplete class="inline-input" v-model="customname" :fetch-suggestions="querySearch" :trigger-on-focus="false" prefix-icon="el-icon-search"
					 placeholder="请输入内容"><template slot="prepend">客户名称:</template></el-autocomplete>
				</el-col>
				<el-col :span="3">
					<el-select v-model="customtypename" placeholder="企业类型">
						<el-option v-for="item in Customtypenameoptions" :key="item.configtypename" :label="item.configtypename" :value="item.configtypename">
						</el-option>
						<el-option value="" label="不限">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3">
					<el-select v-model="customstatus" placeholder="状态">
						<el-option value="1" label="启用">
						</el-option>
						<el-option value="0" label="禁用">
						</el-option>
						<el-option value="" label="不限">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="13">
					<el-button-group>
						<el-button type="primary" @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0">删除<i class="el-icon-delete el-icon--right"></i></el-button>
						<el-button type="primary" @click="add()">增加<i class="el-icon-plus el-icon--right"></i></el-button>
					</el-button-group>
				</el-col>
			</el-row>
			<br />
			<!--数据展示  -->
			<el-table :data="ascustoms" highlight-current-row style="width: 100%" @selection-change="selsChange">
				<el-table-column type="selection" @click="updateSelection()">
				</el-table-column>
				<el-table-column prop="id" width="100" sortable label="序号">
				</el-table-column>
				<el-table-column prop="customname" label="客户名称">
				</el-table-column>
				<el-table-column prop="bossname" label="法人代表">
				</el-table-column>
				<el-table-column sortable label="注册时间">
					<i class="el-icon-time"></i>
					<template slot-scope="scope">{{scope.row.regdatetime | moment('YYYY年MM月DD日')}}</template>
				</el-table-column>
				<el-table-column prop="customtypename" label="类型">
				</el-table-column>
				<el-table-column label="状态"><template slot-scope="scope">
						<el-switch v-model="scope.row.customstatus" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"
						 @change="changSwitch($event,scope.$index, scope.row.id)">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<el-button-group>
							<el-button type="primary" size="mini" @click="dialogVisible(scope.$index, scope.row.id)" round>详情<i class="el-icon-more el-icon--right"></i></el-button>
							<el-button type="primary" @click="dialogsave(scope.$index, scope.row.id)" size="mini" round>修改<i class="el-icon-edit el-icon--right"></i></el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15,20]"
				 :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count">
				</el-pagination>
			</div>
		</div>
		<!-- 详情 -->
		<el-drawer title="代理商客户信息" :visible.sync="drawer" size="50%">
			<div>
				<el-tabs type="border-card">
					<el-tab-pane>
						<span slot="label"><i class="el-icon-user"></i>基本信息</span>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag>企业名称:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.customname}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag>状态:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.customstatus|customstatusFilter}}</el-link>
							</el-col>
						</el-row>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag type="success">企业类型:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.customtypename}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag type="success">企业主页:</el-tag>
							</el-col>
							<el-col :span="6"></el-col>
							<el-link :underline="false">{{dialogVisibleObj.siteurl}}</el-link>
						</el-row>
					</el-tab-pane>
					<el-tab-<el-tab-pane>
						<span slot="label"><i class="el-icon-date"></i>门户信息</span>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag>法人代表:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.bossname}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag>注册日期:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{ dialogVisibleObj.regdatetime | moment('YYYY年MM月DD日')}}</el-link>
							</el-col>
						</el-row>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag type="success">证件类型:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.cardtypename}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag type="success">证件号码:</el-tag>
							</el-col>
							<el-col :span="6"></el-col>
							<el-link :underline="false">{{dialogVisibleObj.cardnum}}</el-link>
						</el-row>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag>国家:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.country}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag>省/地区:</el-tag>
							</el-col>
							<el-col :span="6" v-for="a in objhatprovince" :key="a.id">
								<el-link :underline="false">{{a.province}}</el-link>
							</el-col>
						</el-row>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag type="success">城市:</el-tag>
							</el-col>
							<el-col :span="6" v-for="b in objhatcity" :key="b.id">
								<el-link :underline="false">{{b.city}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag type="success">区/县:</el-tag>
							</el-col>
							<el-col :span="6" v-for="c in objhatarea" :key="c.id">
								<el-link :underline="false">{{c.area}}</el-link>
							</el-col>
						</el-row>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag>公司电话:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.companytel}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag>传真:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{ dialogVisibleObj.companyfax}}</el-link>
							</el-col>
						</el-row>
						<el-row class="row-bg" align="center">
							<el-col :span="4">
								<el-tag type="success">公司地址:</el-tag>
							</el-col>
							<el-col :span="6">
								<el-link :underline="false">{{dialogVisibleObj.companyaddress}}</el-link>
							</el-col>
							<el-col :span="4">
								<el-divider direction="vertical"></el-divider>
							</el-col>
							<el-col :span="4">
								<el-tag type="success">备注:</el-tag>
							</el-col>
							<el-col :span="6"></el-col>
							<el-link :underline="false">{{dialogVisibleObj.memo}}</el-link>
						</el-row>
						</el-tab-pane>
						<el-tab-pane>
							<span slot="label"><i class="el-icon-s-check"></i>联系人信息</span>
							<div v-for="d in objascontacts" :key="d.id">
								<el-row class="row-bg" align="center">
									<el-col :span="4">
										<el-tag type="success">姓名:</el-tag>
									</el-col>
									<el-col :span="6">
										<el-link :underline="false">{{d.contactname}}</el-link>
									</el-col>
									<el-col :span="14">
										<div></div>
									</el-col>
								</el-row>
								<el-row class="row-bg" align="center">
									<el-col :span="4">
										<el-tag>电话:</el-tag>
									</el-col>
									<el-col :span="6">
										<el-link :underline="false">{{d.contacttel}}</el-link>
									</el-col>
									<el-col :span="4">
										<el-divider direction="vertical"></el-divider>
									</el-col>
									<el-col :span="4">
										<el-tag>传真:</el-tag>
									</el-col>
									<el-col :span="6">
										<el-link :underline="false">{{d.contactfax}}</el-link>
									</el-col>
								</el-row>
								<el-row class="row-bg" align="center">
									<el-col :span="4">
										<el-tag type="success">邮箱:</el-tag>
									</el-col>
									<el-col :span="6">
										<el-link :underline="false">{{d.contactemail}}</el-link>
									</el-col>
									<el-col :span="4">
										<el-divider direction="vertical"></el-divider>
									</el-col>
									<el-col :span="4">
										<el-tag type="success">职务:</el-tag>
									</el-col>
									<el-col :span="6"></el-col>
									<el-link :underline="false">{{d.contactrole}}</el-link>
								</el-row>
							</div>
						</el-tab-pane>
				</el-tabs>
			</div>
		</el-drawer>
	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import headTop from '../components/headTop'
	import {
		findOne,
		findAll,
		search,
		findconfigTypeFives,
		deletebyids,
		updateCustomStatus
	} from '@/api/getData'
	export default {
		data() {
			return {
				//省
				objhatprovince: [],
				//市
				objhatcity: [],
				//区
				objhatarea: [],
				//联系人集合
				objascontacts: [],
				//详细信息对象
				dialogVisibleObj: {},
				drawer: false,
				innerDrawer: false,
				sels: [], //选中的值显示
				//客户姓名模糊
				customname: '',
				//企业类型筛选
				customtypename: '',
				//状态筛选
				customstatus: '',
				Customtypenameoptions: [],
				//客户姓名集合
				devEuiArr: [],
				restaurants: [],
				//所有客户信息
				ascustoms: [],
				page: 0,
				size: 5,
				currentPage: 1,
				count: 0,
			}
		},
		//头
		components: {
			headTop,
		},
		//初始化加载
		created() {
			this.initData();
		},
		//仓库信息
		computed: {
			...mapState(['adminInfo']),
		},
		//过滤器
		filters: {
			moneyFilter: function(val) {
				return '￥' + val + '.00';
			},
			customstatusFilter: function(val) {
				if (val == 1) {
					return '启用'
				} else {
					return '停用'
				}
			}
		},
		//动态加载
		watch: {
			customname: function(newValue) {
				this.selectWhere();
			},
			customtypename: function(newValue) {
				this.selectWhere();
			},
			customstatus: function(newValue) {
				this.selectWhere();
			},
		},
		methods: {
			//增加路由
			add(){
				this.$router.push({
					path: '/addascustoms',
					query: {
						upobjcons: null
					}
				})

			},
			//开关修改
			async changSwitch(data,$index,id){
				if(data==1){
					await updateCustomStatus(id,1)
				}else{
					await updateCustomStatus(id,0)
				}
			},
			//修改
			async dialogsave($index, id) {
				const upobjcons = await findOne(id);
				this.$router.push({
					path: '/updateascustoms',
					query: {
						upobjcons: upobjcons
					}
				})
			},
			handleClose(done) {
				if (this.loading) {
					return;
				}
				this.$confirm('确定要提交表单吗？')
					.then(_ => {
						this.loading = true;
						this.timer = setTimeout(() => {
							done();
							// 动画关闭需要一定的时间
							setTimeout(() => {
								this.loading = false;
							}, 400);
						}, 2000);
					})
					.catch(_ => {});
			},
			cancelForm() {
				this.loading = false;
				this.dialog = false;
				clearTimeout(this.timer);
			},
			//详细信息
			async dialogVisible($index, id) {
				this.drawer = true;
				const objcons = await findOne(id);
				this.dialogVisibleObj = objcons.asCustoms;
				//省
				this.objhatprovince = objcons.hatProvince;
				//市
				this.objhatcity = objcons.hatCity;
				//区
				this.objhatarea = objcons.hatArea;
				//联系人集合
				this.objascontacts = objcons.asContacts;
			},
			//批量删除
			deleteFileOrDirectory() {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteByids();
					this.selectWhere();
				})
			},
			//删除选中时触发
			selsChange(sels) {
				this.sels = sels
			},
			//联想输入
			querySearch(queryString, cb) {
				var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			//联想输入过滤
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
				};
			},
			//封装批量删除方法
			async deleteByids() {
				//获取所有选中行的id组成的字符串，以逗号分隔
				const res = await deletebyids({
					ids: this.sels.map(item => item.id).join()
				})
				this.selectWhere();
			},
			//封装查询方法
			async selectWhere() {
				const res = await search({
					page: this.currentPage,
					rows: this.size,
					customname: this.customname,
					customtypename: this.customtypename,
					customstatus: this.customstatus
				});
				this.count = res.total;
				this.ascustoms = res.rows;
			},
			//封装联想输入的数据
			async isfindall() {
				this.restaurants = await findAll();
				for (var i = 0; i < this.restaurants.length; i++) {
					this.devEuiArr.push({
						"value": this.restaurants[i].customname
					})
				}
			},
			//页面初始化
			async initData() {
				try {
					console.log(this.customname)
					console.log(this.customtypename)
					console.log(this.customstatus)
					const res = await search({
						page: this.currentPage,
						rows: this.size,
						customname: this.customname,
						customtypename: this.customtypename,
						customstatus: this.customstatus
					});
					this.count = res.total;
					this.ascustoms = res.rows;
					this.isfindall();
					this.Customtypenameoptions = await findconfigTypeFives();

				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			//分页
			handleSizeChange(val) {
				this.size = val;
				this.initData()
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.page = (val - 1) * this.rows;
				this.initData()
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		}
	}
</script>

<style lang="less">
	@import '../style/mixin';

	.table_container {
		padding: 20px;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.box-card {
		margin: 0px auto;
		width: 480px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
